import { useState, useLayoutEffect } from 'react';
import { Router, useLocation } from 'react-router-dom';
import { store } from '@/redux/store';
import Routes from '@/router';
import history from '@/router/history';
import { Provider } from 'react-redux';
import { ConfigProvider, message } from 'antd';
import { AliveScope } from 'react-activation';
import zhCN from 'antd/locale/zh_CN';
import './App.css';

const AppRoutes = () => {
  const { pathname } = useLocation();

  useLayoutEffect(() => {
  
  }, [pathname]);

  return (
    <Routes />
  );
}

function App() {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });
  useLayoutEffect(() => history.listen(setState), [history]);

    return (
    <ConfigProvider
      locale={zhCN}
    >
      <Provider store={store}>
        <Router
          location={state.location}
          navigationType={state.action}
          navigator={history}
        >
          <AliveScope>
            <AppRoutes />
          </AliveScope>
        </Router>
      </Provider>
    </ConfigProvider>
  );
}

export default App;

